<template>
  <div class="main" >
    <el-container>
      <!--侧边栏-->
      <el-aside width="180px" height="1500px">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 10px">
          <el-radio-button :label="false"><el-icon><Right /></el-icon></el-radio-button>
          <el-radio-button :label="true"><el-icon><Back /></el-icon></el-radio-button>
        </el-radio-group>
        <el-menu
            default-active="2"
            class="el-menu-vertical"
            :collapse="isCollapse"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>服务</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="adMain">主页</el-menu-item>
              <el-menu-item index="1-2" @click="setAdmin">管理员</el-menu-item>
              <el-menu-item index="1-3" @click="adShop">商品审核</el-menu-item>
              <el-menu-item index="1-4" @click="adForum">帖子审核</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item index="2">
            <el-icon><setting /></el-icon>
            <template #title>设置</template>
          </el-menu-item>
          <div  class="out">
            <el-button  @click="Out" >退出</el-button>
          </div>
        </el-menu>
      </el-aside>
      <el-container>

        <!--主页展示区-->
        <el-main style="height: 800px"><router-view/></el-main>
      </el-container>
    </el-container>
  </div>



</template>

<script  setup>
import { ref } from 'vue'
import {useUserStore} from "../../stores";
import router from "../../router";
const isCollapse = ref(false)
const Out = () =>{
  router.push('/')
}
const adShop=()=>{
  router.push('/admin/setGoods')
}
const adMain=()=>{
  router.push('/admin/adminMain')
}
const setAdmin=()=>{
  router.push('/admin/setAdmin')
}
const adForum=()=>{
  router.push('/admin/setForum')
}

</script>

<style>
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}




.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.out{
  display: flex;
  justify-content: center;
  margin-top: 200px; /* 将菜单项推到最底部 */
}
</style>
